
import React, { useContext, useState } from "react"

// https://www.bilibili.com/video/BV1Bu4y1s7me/
// children render实现具名插槽



const Header = (props) => {

  console.log('Header render...')
  return (
    <>
      <h2>Header</h2>
    </>
  )
}


const Footer = (props) => {

  console.log('Footer render...')
  return (
    <>
      <h3>Footer</h3>
    </>
  )
}



const MainPage = (props) => {

  return (
    <main>
      
      <h1>具名插槽</h1>
      <p>模版位置</p>

      <div>
        {props.children.header()}
      </div>


      <div>
        {props.children.footer()}
      </div>

    </main>
  )
}



function SloatApp() {

  return (
    <>
      <MainPage>
        {
          // 把组件当作具名对象传入
          {header: Header, footer: Footer}
        }
      </MainPage>
    </>
  )
 
}



export default SloatApp

